<template>
  <div class="abc">
    <h2>文章详情</h2>
    <el-divider></el-divider>
      <div class="abc_s">
        <div class="abc_main typo typo-selection">
          <h1>{{item.title}}</h1>
          <h2><span>{{item.createtime}}</span> 来源：<span>{{item.id}}</span> 浏览次数：<span>{{item.visits}}</span></h2>
      </div>
      </div>
      <div class="abc_content typo ">
          <div v-html="item.content"></div>
          <div class="detail_ping">
            <sapn>评论</sapn>
            <span>删除</span>
          </div>
      </div>
      <h4>1个评论</h4>
      <el-divider></el-divider>

      <div class="pinglun">
        <div class="title">
          <p>
            本次宣传月从11月10日一直持续到12月10日，活动将围绕“倡导全民阅读，传递阅读力量，引领悦读时尚，共建书香校园”主题，开展包括十场“南职大讲堂”讲座、三场“南职大展览”、两场“阅读推广”活动、多场馆藏数字资源培训以及读者沙龙、“温馨推送，书香寝室”等一系列丰富多彩的活动，以此让大学新生们能亲身体验图书馆创新服务的魅力，使悦目悦心的读者服务深深根植在广大读者心中，让悦读伴随其一生，并受益终身。

  </p>
          <div class="operate">
            <div class="tool pull-left">
                <span class="time">1小时前提问</span>
                <span class="comment">评论</span>
                <span class="edit">编辑</span>
                <span class="jubao">举报</span>
            </div>

            <div class="myanswer pull-right">
              <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></img>
              <a href="#">我的回答</a>
            </div>
            <div class="clearfix"></div>
        </div>
        </div>
      </div>

  </div>
</template>
<script>
    name: 'detail/_id'
    import axios from 'axios'
    import '~/assets/css/typo.css'
    import articleApi from '@/api/article'
    export default {
        // asyncData({
        //     params
        // }) {
        //     return articleApi.findById(params.id).then(res => {
        //         return {
        //             item: res.data.data
        //         }
        //     })
        // },

        asyncData({
            params
        }) {
            return axios.all([articleApi.findById(params.id, 1, 10),
                articleApi.updatelook(params.id)
            ]).then(axios.spread(function(item, data) {
                return {
                    item: item.data.data
                }
            }))
        },
    }
</script>
<style>
    .abc>h2 {
        padding: 30px 0 0 30px;
        color: #9b0b01;
        font-size: 20px;
    }

    .abc_s {
        position: relative;
        height: 100px;
    }

    .abc_main {
        height: 200px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .abc_main>h1 {
        color: black !important;
    }

    .abc_main h2 {
        transform: translateX(25%);
        color: #999;
        font-size: 14px;
    }

    .abc_content {
        padding: 20px 20px;
    }

    .detail_ping {
        color: #999;
        padding-left: 20px;
    }

    .el-divider:nth-child(2) {
        margin: 10px 0;
    }

    .title {
        margin-left: 50px;
        padding-bottom: 15px;
        padding-top: 10px;
        border-bottom: 2px solid #e2e2e2;
    }

    .operate {
        margin-top: 15px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        /* 横向中间自动空间 */
    }

    .tool span {
        margin-right: 15px;
        cursor: pointer;
        color: #9a9a9a
    }

    .myanswer img {
        width: 22px;
        height: 22px;
        border-radius: 15px;
    }
</style>
